<script lang="ts" setup>
import { ref } from 'vue'

const accountValue = ref('')
const passwordValue = ref('')
const codeValue = ref('')
const loginMode = ref(1)
const isAutoLogin = ref(false)
</script>

<template>
  <div>
    <div
      class="h-[200px] md:h-[400px] bg-blue-500 flex flex-col gap-2 md:flex-row md:gap-14 justify-center items-center mb-16"
    >
      <img class="h-[64px] w-[64px]" src="@/assets/image/headLogo.png" alt="Logo" />
      <div class="text-xl font-bold text-white">程/序/员/的/梦/工/厂</div>
    </div>
    <div
      class="container mx-auto mt-[-100px] md:mt-[-150px] flex items-center justify-center text-center"
    >
      <div
        class="w-[90%] p-10 md:w-[750px] md:p-20 bg-white rounded-2xl border-2 flex flex-col md:flex-row justify-center gap-14"
      >
        <div class="flex-1 flex flex-col items-center justify-center">
          <div class="flex gap-4 text-2xl font-bold text-gray-500">
            <div
              :class="loginMode == 1 ? 'text-blue-500 border-b-4 border-blue-500 pb-1 mb-5' : ''"
              class="cursor-pointer"
              @click="loginMode = 1"
            >
              账号登录
            </div>
            <div
              :class="loginMode == 2 ? 'text-blue-500 border-b-4 border-blue-500 pb-1 mb-5' : ''"
              class="cursor-pointer"
              @click="loginMode = 2"
            >
              验证码登录
            </div>
          </div>
          <div v-if="loginMode == 1" class="w-full flex flex-col gap-4">
            <el-input v-model="accountValue" placeholder="邮箱/用户名/手机号" type="text" />
            <el-input
              v-model="passwordValue"
              placeholder="请输入密码"
              show-password
              type="password"
            />
            <div class="w-full flex justify-between items-center">
              <el-checkbox v-model="isAutoLogin" label="7天内自动登录" size="large" />
              <a href="#">忘记密码</a>
            </div>
            <el-button size="large" class="w-full" round type="primary">登录</el-button>
          </div>
          <div v-if="loginMode == 2" class="w-full flex flex-col gap-4">
            <el-input v-model="accountValue" placeholder="请输入邮箱" type="text" />
            <el-input v-model="codeValue" placeholder="请输入验证码">
              <template #suffix>
                <a href="#">获取验证码</a>
              </template>
            </el-input>
            <div class="w-full">
              <el-checkbox v-model="isAutoLogin" label="7天内自动登录" size="large" />
            </div>
            <el-button size="large" class="w-full" round type="primary">登录</el-button>
          </div>
        </div>
        <div class="flex flex-col justify-center">
          <div>还没有账号：</div>
          <div class="text-3xl">
            <a class="text-blue-500" href="#"> 立即注册 </a>
          </div>
          <div>
            登录即同意
            <a href="#">《隐私政策》</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
